<html>
	<head>
		<title>Music Recommender Results</title>
		<link type="text/css" rel="stylesheet" href="/stylesheets/main.css"/>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	</head>
	<body>
	
	<div style="display:inline-block; float:left;">
		<div class="info_box">
		<img src="{{ artist_info.image }}" style="float: right;">
		<b><a class="mainArtist" href="{{ artist_info.url }}">{{ artist_info.name }}</a></b><br>
		<p>
		<b><span style="font-size:12px;">Did you mean?</span></b><br>
		{% for artist in artist_search.artists %}
			{% if forloop.counter < 5 and forloop.counter > 1 %}
				<span style="font-size:12px;"><a class ="relatedArtist" href="{{ artist.url }}">{{ artist.name }}</a>, </span>
			{% endif %}
			{% if forloop.counter == 5 and forloop.counter > 1 %}
				<span style="font-size:12px;"><a class ="relatedArtist" href="{{ artist.url }}">{{ artist.name }}</a></span>
			{% endif %}
			</span>
		{% endfor %}
		</p>
		
		<b><span style="font-size:20px;">Similar artists:</span></b><br>
		{% for similar in artist_info.similar %}
			<a class="similarArtist" href="{{ similar.url }}&otherArtists={{ other_artists }}">{{ similar.name }}</a><br>
		{% endfor %}
		<br>
		<div style="clear:both;"></div>
		<b><a style="text-align:right; font-size:12px" href="/">click here to start a new search</a></b>
		</div>
		
		<div style="display:inline-block; float:left; background-color:#4D4D4D; border:thin solid #555; padding:10px; margin:10px; border-radius:3px;">
			<b><span style="font-size:20px;">Browsing Artists</span></b><br>
			{% for artist in artist_list %}
				<a href="/results?searchBox={{ artist }}&otherArtists={{ other_artists }}">{{ artist }}</a><br>
			{% endfor %}
			<a href="/results?searchBox={{ artist }}" style="font-color: #f96; font-size: 10px;">Clear</a>
		</div>
		
		<div style="display:inline-block; float:right; background-color:#4D4D4D; border:thin solid #555; padding:10px; margin:10px; border-radius:3px;">
		<b><span style="font-size:20px;">Similar to all</span></b><br>
			{% for artist in recommendation %}
				<a href="/results?searchBox={{ artist }}&otherArtists={{ other_artists }}">{{ artist }}</a><br>
			{% endfor %}
		</div>
		
	</div>

	<div style="display:inline-block; text-align:center;">
	<b><span style="font-size:20px;">Top Tracks</span></b>
		{% for track in song_search.tracks %}
			{% if forloop.counter <= 5 %}
				{% if track.artist == artist_info.name %}
					<div class="info_box" style="text-align:left;">
						<a href="javascript:togglePlayer({{ forloop.counter }});"><b>► {{ track.name }}</b></a> by <i>{{ track.artist }}</i><br>
						<iframe id ="player{{ forloop.counter }}" src="{{ track.youtube }}" style="border:none;height:35;width:100%"></iframe>
					</div>
				{% endif %}
			{% endif %}
		{% endfor %}
	</div>
	
	<script type="text/javascript">
							 
		jQuery("iframe").hide();
		function togglePlayer(num) {
			   if(jQuery('#player'+num).css('display') == 'none')
			   {
				   jQuery('#player'+num).slideDown("slow");
			   }
			   else 
			   {
				   jQuery('#player'+num).slideUp("fast");
			   }
		}
	</script>
	
	</body>
</html>